<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.cont {
		    margin: 30px;
		    width: 300px;
		    height: 40px;
		    display: flex;
		    justify-content: space-between;
		    border: 1px solid #ddd;
		    padding: 10 125px 10 50px;
		    border-radius: 5px;
			font-size: 16px;
		    box-shadow: 0 3px 5px rgb(0 0 0 / 5%);
			position: absolute;
			z-index: 9;
		}
		#ip {
			line-height: 20px;
		    width: 200px;
		    height: 38px;
		    outline: none;
			border: none;
			text-indent: 10px;
		}
		#btn {
			cursor: pointer;
		    background-color: #3072f6;
		    width: 100px;
			border: none;
		    border-radius: 3px;
		    color: #fff;
		}
		#btn:hover {
			opacity: 0.8;
		}
		body,html,#container {
		    overflow: hidden;
		    width: 100%;
	        height: 100%;
	        margin: 0;
		    font-family: "微软雅黑";
		}
	</style>
	<title>地图</title>
</head>
<body>
	<div class="cont">
		<input id="ip" type="text" placeholder="请输入城市">
		<button id="btn">查询</button>
	</div>
	<div id="container"></div>
</body>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=CQ6PQayAcUMTO41vSdIRSsp0l2YYPyg4">
</script>
<script type="text/javascript">
	getCity();
	function getCity(){
		$.ajax({
			url:"http://120.48.109.174:8081/area/city?level=1",
			success:function(res){
				var citys = res.body;
				var citys_arr = [];
				var value_arr = [];
				citys.forEach(item => {
					value_arr.push(item.value);
				})
				citys.forEach(item => {
					citys_arr.push(item.label);
				})
				console.log(citys_arr);
				var id = localStorage.getItem("id")
				console.log(id);
				if(id!==''){
					$('#ip').val(id);
					for(i=0;i<citys_arr.length;i++){
						if($('#ip').val()==citys_arr[i]){
							console.log(i,citys_arr[i]);//打印城市
							console.log(value_arr[i])//城市id
							$.ajax({
								url:"http://120.48.109.174:8081/area/map?id="+value_arr[i],
								success:function(res){
									var sub_citys = res.body;
									console.log(sub_citys)
									var area_arr = [];
									var map_city = [];
									sub_citys.forEach(item => {
										area_arr.push(item.coord);
										map_city.push(item.label);
									})
									console.log(area_arr);
									console.log(map_city);
									var map = new BMapGL.Map('container', {
									    restrictCenter: false
									});
									map.centerAndZoom(new BMapGL.Point(area_arr[0].longitude,area_arr[0].latitude), 10);
									map.enableScrollWheelZoom();
									var bdary = new BMapGL.Boundary();
									bdary.get('value_arr[i]', function (rs) {
									    // // 绘制行政区
									    map.clearOverlays();
									    var count = rs.boundaries.length;
									    // if (count === 0) {
									    //     alert('未能获取当前输入行政区域');
									    //     return;
									    // }
									    var pointArray = [];
									    for (var i = 0; i < count; i++) {
									        var ply = new BMapGL.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeColor: '#90c8f1'}); // 建立多边形覆盖物
									        map.addOverlay(ply);
									        pointArray = pointArray.concat(ply.getPath());
									    }
										 map.setViewport(pointArray); // 调整视野
										// 绘制带高度的点
										var cityGeo = new BMapGL.Geocoder();
										for (let i = 0; i < map_city.length; i++) {
											cityGeo.getPoint(map_city[i], function (point) { // 地址解析获取对应经纬度
												var pt = new BMapGL.Point(point.lng, point.lat);
												console.log(map_city[i], pt)
												var marker = new BMapGL.Marker3D(pt, Math.round(Math.random()) * 130000, {
													size: 50,
													shape: 'BMAP_SHAPE_CIRCLE',
													fillColor: '#454399',
													fillOpacity: 0.6
												});
												map.addOverlay(marker);
											});
										}
									})	
								}
							});
						}
					}
				}
				$('#btn').on("click",() =>{
					for(i=0;i<citys_arr.length;i++){
						if($('#ip').val()==citys_arr[i]){
							console.log(i,citys_arr[i]);//打印城市
							console.log(value_arr[i])//城市id
							$.ajax({
								url:"http://120.48.109.174:8081/area/map?id="+value_arr[i],
								success:function(res){
									var sub_citys = res.body;
									console.log(sub_citys)
									var area_arr = [];
									var map_city = [];
									sub_citys.forEach(item => {
										area_arr.push(item.coord);
										map_city.push(item.label);
									})
									console.log(area_arr);
									console.log(map_city);
									var map = new BMapGL.Map('container', {
									    restrictCenter: false
									});
									map.centerAndZoom(new BMapGL.Point(area_arr[0].longitude,area_arr[0].latitude), 10);
									map.enableScrollWheelZoom();
									var bdary = new BMapGL.Boundary();
									bdary.get('value_arr[i]', function (rs) {
									    // // 绘制行政区
									    map.clearOverlays();
									    var count = rs.boundaries.length;
									    // if (count === 0) {
									    //     alert('未能获取当前输入行政区域');
									    //     return;
									    // }
									    var pointArray = [];
									    for (var i = 0; i < count; i++) {
									        var ply = new BMapGL.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeColor: '#90c8f1'}); // 建立多边形覆盖物
									        map.addOverlay(ply);
									        pointArray = pointArray.concat(ply.getPath());
									    }
										 map.setViewport(pointArray); // 调整视野
										// 绘制带高度的点
										var cityGeo = new BMapGL.Geocoder();
										for (let i = 0; i < map_city.length; i++) {
											cityGeo.getPoint(map_city[i], function (point) { // 地址解析获取对应经纬度
												var pt = new BMapGL.Point(point.lng, point.lat);
												console.log(map_city[i], pt)
												var marker = new BMapGL.Marker3D(pt, Math.round(Math.random()) * 130000, {
													size: 50,
													shape: 'BMAP_SHAPE_CIRCLE',
													fillColor: '#454399',
													fillOpacity: 0.6
												});
												map.addOverlay(marker);
											});
										}
									})	
								}
							});
						}
					}
				})
			}
	 	});
	}
</script>
</html>
